<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="${initParam.root }css/button.css">
<link rel="stylesheet" type="text/css" href="${initParam.root }css/table.css">
<link rel="stylesheet" type="text/css" href="${initParam.root }css/index.css">
<script type="text/javascript">
$(document).ready(function(){
	 var regEmail = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
	$("#confrimBtn").click(function(){
		$("#registerForm").submit();
	}); // click
	$("#registerForm").submit(function(){
		if($("#id").val()==""){
			alert("아이디를 입력해주세요.");
			$("#id").focus();
			return false;
		} else if($("#password").val()==""){
			alert("비밀번호를 입력해주세요.");
			$("#password").focus();
			return false;
		} else if($("#name").val()==""){
			alert("이름을 입력해주세요.");
			$("#name").focus();
			return false;
		}else if($("#ssn").val()==""){
			alert("주민번호를 입력해주세요.");
			$("#ssn").focus();
			return false;
		}else if($("#address").val()==""){
			alert("주소를 입력해주세요.");
			$("#address").focus();
			return false;
		}else if($("#email").val()==""){
			alert("이메일을 입력해주세요.");
			$("#email").focus();
			return false;
		}else if(!regEmail.test($("#email").val())){
			alert("올바른 이메일 주소가 아닙니다!");
			return false;
		}else if($("#phone").val()==""){
			alert("휴대전화번호를 입력해주세요.");
			$("#phone").focus();
			return false;
		}else if(isNaN($("#phone").val())){
			alert("휴대전화번호는 숫자로 입력해주세요.");
			$("#phone").focus();
			return false;
		}
	}); // submit
	$("#cancelBtn").click(function(){
		if(confirm("취소하시겠습니까?")){
		location.href="${initParam.root}main.do";
		} // if
	}); // click
	
	$("#id").keyup(function(){
		$.ajax({
			type:"post", 
			url:"idCheck.do", 
			data:"id="+$("#id").val(),
			dataType:"json",
			success:function(jsonData){
				if(jsonData.idCount!=0){
					$("#idCheckView").html("<font color='red'>중복되는 아이디입니다.</font>");
					if($("#id").val()==""){
						$("#idCheckView").html("");
					}
				}else{
					$("#idCheckView").html("<font color='blue'>사용가능</font>");
					if($("#id").val()==""){
						$("#idCheckView").html("");
					}
				}
			} // callback
		}); // ajax
	}); // keyup
	
	$("#ssn").keyup(function(){
		if($("#ssn").val().length<13 ||$("#ssn").val().length>13){
			$("#ssnCheckView").html("<font color='green'>주민번호는 13자여야 합니다.</font>");
			if($("#ssn").val()==""){
				$("#ssnCheckView").html("");
			}
			return;
		}
			$.ajax({
				type:"post", 
				url:"ssnCheck.do", 
				data:"ssn="+$("#ssn").val(),
				dataType:"json",
				success:function(jsonData){
					if(jsonData.ssnCount!=0){
						$("#ssnCheckView").html("<font color='red'>중복되는 주민번호입니다.</font>");
						if($("#ssn").val()==""){
							$("#ssnCheckView").html("");
						}
					}else{
						$("#ssnCheckView").html("<font color='blue'>사용가능</font>");
						if($("#ssn").val()==""){
							$("#ssnCheckView").html("");
						}
					}
				} // callback
		}); // ajax
	}); // keyup
	$("#logo_registerView").click(function(){
		location.href="${initParam.root}";
	});
}); // ready
</script>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font: small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}

#logo_registerView:hover{
	cursor:pointer;
}

input {
  border: 1px solid silver;
  border-radius: 5px;
  -webkit-appearance: none;
  height: 50px;
  width: 350px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 12pt;
  padding-left: 10px;
  font-family: small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
</style>
</head>
<body>
<center>
	<br>
	<img src="${initParam.root }img/logo_loginView.png" id="logo_registerView">
	<br>
	<form id="registerForm" method="post" action="${initParam.root}register_result.do">
			<table >
				<tr>
					<td align="left">
						Id
						<br>
						<input type="text"  placeholder="아이디를 입력하세요." name="id"  id="id"  size="40"  autofocus>
						<br>
						<span style="font-size: 12px" id="idCheckView"></span>
					</td>
				</tr>
 				<tr>
					<td align="left">Password
						<br>
						<input type="password"  placeholder="비밀번호를 입력하세요."  name="password" id="password" size="40">
					</td>
				</tr>
				<tr>
					<td align="left">Name
						<br>
						<input type="text" placeholder="이름을 입력하세요."  name="name" id="name" size="40">
					</td>
				</tr>
				<tr>
					<td align="left">Identification Number
						<br>
						<input type="text"  placeholder="주민번호를 입력하세요." name="ssn" id="ssn" size="40">
						<br>
						<span style="font-size: 12px"  id="ssnCheckView"></span>
						<br>
						<font size="1">'-' 를 제외하고 입력해주세요.</font>
						<br>
						<font size="1">예) 123456-1234567 이면 1234561234567</font>
					</td>
				</tr>
				<tr>
					<td align="left">Address
						<br>
						<input type="text" placeholder="주소을 입력하세요."  name="address" id="address" size="40">
					</td>
				</tr>
				<tr>
					<td align="left">E-mail
						<br>
						<input type="email"  placeholder="e-mail을 입력하세요." name="email" id="email"  size="40">
					</td>
				</tr>
				<tr>
					<td align="left">Phone
						<br>
						<input type="text" placeholder="휴대전화번호를 입력하세요." name="phone" id="phone" size="40">
						<br>
						<font size="1">'-' 를 제외하고 입력해주세요.</font>
						<br>
						<font size="1">예) 010-4707-4713 이면 01047074713</font>
					</td>
				</tr>
				<tr>
					<td align="right">
						<img src="${initParam.root}img/cancel.png"  height="25" id="cancelBtn" class="img_button">
						&nbsp;&nbsp;
						<img src="${initParam.root}img/register.png"  height="25" id="confrimBtn" class="img_button">
					</td>
				</tr>
			</table>
	</form>
</center>
</body>
</html>
